$theme-color:                       #1890FF;
$font-color:                        #111;
$font-gray-color:                   #555;
$font-light-gray-color:             #999;
$border-color:                      #d9d9d9;
$black:                             #000;
$bg-color:                          #f1f5f7;
$danger-color:                      #ff3d60;
$shadow-color:                      rgba(0,0,0,.03);

$font-size-large:                   20px;
$font-size-normal:                  16px;
$font-size-small:                   14px;
$font-size-mini:                    12px;

$padding:                           24px;

// opacity
$hover-feedback:                    .7;

// radius
$border-radius:                     4px;

// size
$containerWidth:                    1040px;

// The :export directive is the magic sauce for webpack
// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
// need scss module when project create by create-react-app
:export {
    themeColor: $theme-color;
    bgColor: $bg-color;
    dangerColor: $danger-color;
    paddingSize: $padding;
    shadowColor: $shadow-color;
    containerWidth: $containerWidth
}
